<template>
	<view>
		<view class="home-header">
			<view class="search-bar">
				<!-- 移动端字体图标采用编码方式，用class不好使 -->
				<view class="icon iconfont">&#xe600;</view>
				<input type="text" class="search-input" placeholder="搜一搜吧..." />
			</view>
		</view>
		<!-- 解决顶部栏设置position:fixed后下面内容网上移动的问题 -->
		<view class="block"></view>
	</view>

</template>

<script>
</script>

<style lang="scss">
	.home-header {
		height: 100upx;
		background: #DD6891;
		padding: 10upx 50upx;
		box-sizing: border-box;
		position: fixed;
		width: 750upx;
		z-index: 99;
	}

	.search-bar {
		background-color: #fff;
		height: 80upx;
		display: flex;
		align-items: center;
		padding: 10upx 20upx;
		color: #505050;
		border-radius: 10upx;
		box-sizing: border-box;
	}

	.search-input {
		font-size: 32upx;
		margin-left: 20upx;
	}

	.block {
		height: 100upx;
	}
</style>
